<template>
	<view>
		<u-navbar :background="background" :borderBottom="false">
			<view class="ft_16 fw-b">
				我的团队
			</view>
		</u-navbar>
		<view class="content">
			<view class="con_1 display">
				<image :src="userinfo.avatar"></image>
				<view class=" p_left_10">
					<view class="p_bottom_10">
						<text class="p_right_10 ft_18 fw-b">{{userinfo.username}}</text>
						<text class="">{{userinfo.mobile}}</text>
					</view>
					<view class="ft_12 c-999">
						我的邀请人：{{userinfo.p_username?userinfo.p_username:'无'}}
					</view>
				</view>
			</view>
			<view class="con_2 display ft_16">
				<view :class="tabs==0?'active':'noactive'" @click="selectTab(0)">一级（{{xiajiuser.one_count}}）</view>
				<view :class="tabs==1?'active':'noactive'" @click="selectTab(1)">二级（{{xiajiuser.two_count}}）</view>
			</view>
			<view class="con_3">
				<view class="" v-if="tabs==0">
					<view class="display xiajilist" v-for="(item,index) in xiajiuser.one_user" :key="index">
						<view class="">
							<image :src="item.avatar"></image>
						</view>
						<view class="p_left_10 ft_12 c-999" style="line-height: 1.8em;">
							<view class=" c-333">
								<text class="p_right_10 fw-b ft_14">{{item.username}}</text>
								<text>{{item.mobile}}</text>
							</view>
							<view class="">
								{{role_type!=3?'成为分销商时间':'成为分销商时间'}}：{{item.distributor_time}}
							</view>
							<view class="">
								{{role_type!=3?'收益':'分销收益'}}：{{item.distribution_money}}
							</view>
							<view class="">
								TA的下线：{{item.distribution_num}}
							</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="display xiajilist" v-for="(item,index) in xiajiuser.two_user" :key="index">
						<view class="">
							<image :src="item.avatar"></image>
						</view>
						<view class="p_left_10 ft_12 c-999" style="line-height: 1.8em;">
							<view class=" c-333">
								<text class="p_right_10 fw-b ft_14">{{item.username}}</text>
								<text>{{item.mobile}}</text>
							</view>
							<view class="">
								{{role_type!=3?'成为分销商时间':'成为分销商时间'}}：{{item.distributor_time}}
							</view>
							<view class="">
								{{role_type!=3?'收益':'分销收益'}}：{{item.distribution_money}}
							</view>
							<view class="">
								TA的下线：{{item.distribution_num}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',},
				userinfo:{},
				tabs:0, //选择下级
				
				xiajiuser:[], //下级列表
				role_type:"",//入驻身份  1/2/3  经销商/门店/体彩店
				
			}
		},
		onLoad() {
			this.getmyTeam() //获取我的团队
			this.role_type=this.$all.getData('userInfo').role_type
			console.log(this.role_type);
		},
		methods: {
			getmyTeam(){ //获取我的团队
				this.$myRequest('user/team',{})
				.then(res=>{
					console.log(res.data);
					if(res.data.code==1){
						this.userinfo=res.data.data.user //用户信息
						this.xiajiuser=res.data.data //收入
					}
				})
			},
			selectTab(e){ //选择tab
				this.tabs=e
			},
			
			
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	padding-top: 10px;
	.con_1{
		padding: 15px;
		background-color: #FFFFFF;
		margin-bottom: 5px;
		image{
			width: 60px;height: 60px;border-radius: 50%;
		}
	}
	.con_2{
		background-color: #FFFFFF;
		.active{
			width: 50%;padding: 10px 0;border-bottom: 3px solid #e67920;text-align: center;color: #e67920;font-weight: bold;
		}
		.noactive{
			width: 50%;padding: 10px 0;border-bottom: 3px solid #FFFFFF;text-align: center;
		}
		
	}
	.con_3{
		padding: 0 15px;background-color: #FFFFFF;
		.xiajilist{
			padding: 20px 0;border-bottom: 1px solid #eeeeee;align-items: flex-start;
			image{
				width: 50px;height: 50px;border-radius: 50%;
			}
		}
	}
	
}

</style>
